<template>
  <div class="login">
    <p class="p1"><span @click="$router.go(-1)">返回</span></p>
    <!-- <img :src="obj.base" alt="" /> -->
    <div class="tpbt">
      <img class="ii" :src="obj.tp" alt="" />
    </div>
    <!-- 表单 -->
    <van-form @failed="onFailed" ref="bdyz" @submit="dj">
      <van-cell-group inset>
        <van-field
          v-model="obj.value1"
          name="pattern"
          placeholder="请输入手机号"
          :rules="[
            { required: true, message: '不能为空' },
            {
              pattern: /^1[3456789]\d{9}$/,
              message: '手机号格式不正确！',
            },
          ]"
        >
          <template #button>
            <van-button size="small" type="primary" @click="hqyzm"
              >发送验证码</van-button
            >
          </template>
        </van-field>
        <van-field
          v-model="obj.value2"
          name="pattern1"
          placeholder="请输入验证码"
          :rules="[
            { required: true, message: '不能为空' },
            {
              pattern: /^[0-9]\d{5}$/,
              message: '验证码格式不正确！',
            },
          ]"
        />
        <van-field
          v-model="obj.value3"
          name="pattern2"
          placeholder="请输入验证码"
          :rules="[
            { required: true, message: '不能为空' },
            {
              pattern: /^[0-9]\d{3}$/,
              message: '验证码格式不正确！',
            },
          ]"
        >
          <template #extra>
            <img @click="cxhq" class="it" :src="obj.base" alt="" />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
// import { ref } from "vue";
import { Toast } from "vant";
import { reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import { getlgtp, postyzm, getyzm, login } from "../http/api.js";
const bdyz = ref(null);
// const pattern = /^1[3456789]\d{9}$/;
// const pattern1 = /^1[3456789]\d{9}$/;
// const pattern2 = /^[0-9]\d{3}$/;
const obj = reactive({
  tp: "",
  value1: "",
  value2: "",
  value3: "",
  base: 0,
});
const router = useRouter();
// 点击图片重新获取
const cxhq = () => {
  getyzm1();
};
// 获取图片验证码
const getyzm1 = async () => {
  const res = await getyzm();
  // obj.base=res.
  // console.log(res);
  obj.base = res.data.data.url.img;
  console.log(obj.yzm);
};
// 获取验证码
const hqyzm = async () => {
  if (obj.value1.length == 11) {
    // console.log(1);
    const res = await postyzm(obj.value1);
  }
};
// 点击提交
const dj = async () => {
  const res = await login(obj.value1, obj.value2, obj.value3);
  if (res.data.code == 200) {
    localStorage.setItem("token", res.data.data.remember_token);
    localStorage.setItem("zh", res.data.data.mobile);
    localStorage.setItem("userid", res.data.data.id);
    router.push("/wd");
  }
  console.log(res);
};
const gettp = async () => {
  const res = await getlgtp();
  obj.tp = res.data.data.site_logo;
  console.log(res);
};
gettp();
getyzm1();
</script>
<style lang="scss" scoped>
.tpbt {
  text-align: center;
  padding: 100px 0 50px 0;
}
.ii {
  width: 60%;
}
.it {
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 25px;
}
.p1 {
  padding: 15px;
  span {
    font-size: 28px;
  }
}
:deep(#van-field-1-input) {
  padding: 15px;
  box-sizing: content-box !important;
  //   width: 60%;
}
.van-field__body {
  padding: 15px;
}
.van-cell,
.van-field {
  padding: 15px;
}
</style>
